import React, { Component } from 'react'
import { SearchBar, SideBar, Tag, Tabs } from 'antd-mobile'
import Header from '../../components/Header/Header'
import './cate.less'
import { reqcate, reqcategoods } from '../../request/api'
import { Link } from 'react-router-dom'
import { imgPre } from '../../request/http'
export default class Cate extends Component {
  constructor() {
    super()
    this.state = {
      cates: [],
      categoods:[],
      n: 1,
      names:'时令水果'
    }
  }
  componentDidMount() {
    reqcate().then(d => {
      if (d.data.code == 200) {
        this.setState({
          cates: d.data.list
        })
      }
    })
    // this.changeid()
    reqcategoods({fid:this.state.n}).then(d=>{
            if(d.data.code==200){
              this.setState({
                categoods:d.data.list
              })
            }
    })
  }
  changeid(n,names) {
    this.setState({
      n,
      names
    })
    reqcategoods({fid:n}).then(d=>{
      if(d.data.code==200){
        this.setState({
          categoods:d.data.list
        })
      }
})
   
  }
  render() {
    let { cates, n ,categoods,names} = this.state
    return (
      <div>
        <Header title={'商品分类'} back></Header>
        {/* {JSON.stringify(n)} */}
        <div className='search'>
          <SearchBar
            placeholder='请输入内容'
            style={{
              '--border-radius': '100px',
              '--background': '#ffffff',
              '--height': '32px',
              '--padding-left': '12px',
            }}
          />
        </div>

        <div className='catelist'>
          <ul>
            {cates.map((item,index) => (
              <li key={item.id} 
              onClick={() => { this.changeid(item.id,item.catename) }}
              className={item.id == n ? 'active' : ''}
              >{item.catename}</li>
            ))}
          </ul>


        </div>

        {/* 商品 */}
        <div className="goodcate">
           
              <h3>{names}</h3>
              {categoods.map(item=>{
                return(
                  <div className='cates' key={item.id}>
                   <img src={imgPre+item.img} alt="" />
                   <ul>
                     <li><h3>{item.goodsname}</h3></li>
                     <li>
                       <span>￥{item.price}<i>￥{item.market_price}</i></span>
                        <Link to={"/"}>加入购物车</Link>
                     </li>
                     <li className='qx'>999人已付款，99.99%的好评</li>
                   </ul>
              </div>
                )
              })}
          
        </div>
      </div>
    )
  }
}
